<!--
 * @Author: zl
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-11-30 18:49:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\Roles.vue
-->
<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    {{ menus.search.name }}
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogFormVisible = true">
                    {{ menus.export.name }}
                </el-button>
            </el-form-item>
            <el-form-item style="display: none">
                <el-button type="primary" @click="dialogFileVisible = true">
                    {{ menus.upload.name }}
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: page,
                pageSize: pageSize,
                total: total,
            }"
        >
            <el-table-column
                v-for="(item, index) in formList"
                :key="index"
                :prop="item.label"
                :label="item.label"
            >
            </el-table-column>
            <el-table-column
                v-for="(item, index) in imageList"
                :key="index"
                :prop="item.label"
                :label="item.label"
            >
                <template v-slot:default="{ row }">
                    <el-image
                        v-for="(item, index) in row[item.label]"
                        :key="index"
                        :src="'/upload/' + item.path"
                        style="width: 36px; height: 36px"
                        :preview-src-list="['/upload/' + item.path]"
                    >
                        <div class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot:default="{ row }">
                    <el-button
                        @click.prevent="handleDel(row.id)"
                        type="danger"
                        size="mini"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </ve-table>
        <el-dialog
            title="导出表格"
            width="30%"
            v-model="dialogFormVisible"
            :close-on-click-modal="false"
        >
            <!--<el-form-item>
              <el-row style="color: #8a8f97">
                  <div>
                      500条或以下为0.5元；1500条或以下为1元；3000条或以下为1.5元；3000条以上在1.5元基础上每2000条增加0.5元,如不满2000条按照2000条来算。
                  </div>
              </el-row>
              <el-row style="color: #409eff" justify="center">
                  一共【{{ total }}】条,共需缴费【{{ money }}】元
              </el-row>
              <img class="ewmImage" :src="payEwm" />
              <el-row style="color: red">
                  <div>注:</div>
                  <div>1.支付成功之后将会自动下载,并且不支持退款！</div>
                  <div>
                      2.如导出失败,将账号名称,表单名称,订单编号发邮件到【mmdiantai@126.com】
                  </div>
              </el-row>
          </el-form-item>-->
            <el-form-item>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">
                        取 消
                    </el-button>
                    <el-button type="primary" @click="downloadExcel">
                        确 定
                    </el-button>
                </div>
            </el-form-item>
        </el-dialog>
        <el-dialog title="上传模板" width="30%" v-model="dialogFileVisible">
            <el-upload
                accept=".xlsx"
                class="upload-demo"
                :before-upload="beforeUpload"
                multiple
                :limit="1"
            >
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data: () => ({
        description: "from列表",
        menus: {
            search: { name: "查询" },
            export: { name: "导出" },
            upload: { name: "上传模板" },
        },
    }),
};
</script>

<script setup>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
//*导入公共查询方法
import {
    onSubmit,
    handleSizeChange,
    handleCurrentChange,
} from "@/views/layoutpages/common";
const { proxy } = getCurrentInstance();
const dialogFormVisible = ref(false);
const dialogFileVisible = ref(false);
const formType = ref("1");
const money = ref(0.0);
const queryForm = ref(null);
const tableData = ref([]);
const formList = ref([]);
const imageList = ref([]);
// const payEwm = ref(
//     ""
// );
const params = reactive({
    formCode: localStorage.getItem("formCode"),
    pageSize: 10,
    page: 1,
    total: 0,
});
const { pageSize, page, total } = toRefs(params);

/**删除行数据
 * @description:
 * @param {*}
 * @return {*}
 */
const handleDel = (id) => {
    proxy
        .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
        })
        .then(async () => {
            const { code } = await VE_API.system.formDataDel([id]);
            if (code == "00") {
                onSubmit(params, getDataList);
            }
        })
        .catch(() => {
            proxy.$message({
                type: "info",
                message: "已取消删除",
            });
        });
};
/**
 * @description: 导出excel表格
 * @param {*}
 * @return {*}
 */
const downloadExcel = async () => {
    dialogFormVisible.value = false;
    const { code, data } = await VE_API.system.downloadExcelFile({
        formCode: params.formCode,
        type: formType.value,
    });
    if (code == "00") {
        let url = "/upload/" + data;
        window.open(url);
    }
};

const getMoney = () => {
    if (total.value <= 500) {
        money.value = 0.5;
    } else if (500 < total.value && total.value < 1500) {
        money.value = 1.0;
    } else if (1500 < total.value && total.value < 3000) {
        money.value = 1.5;
    } else if (total.value > 3000) {
        let moneys = 1.5;
        let sums = Math.ceil((total.value - 3000) / 2000) * 0.5;
        money.value = moneys + sums;
    }
};

const beforeUpload = async (file) => {
    let fd = new FormData();
    fd.append("file", file); //传文件
    fd.append("formId", localStorage.getItem("formId")); //传其他参数
    const { code, data } = await VE_API.system.uploadExcelFile(fd);
    if (code == "00") {
        proxy.$message({
            type: "success",
            message: "上传成功",
        });
        dialogFileVisible.value = false;
    }
};
/**
 * @description: 获取表头数据
 * @param {*}
 * @return {*}
 */
const getDataTitle = async () => {
    let formCode = params.formCode;
    const { code, data } = await VE_API.system.formFiledList({ formCode });
    if (code == "00") {
        let listTitle = [];
        let imageTitle = [];
        data.forEach((item) => {
            if (item.type == "image") {
                imageTitle.push(item);
            } else {
                listTitle.push(item);
            }
        });
        formList.value = listTitle;
        imageList.value = imageTitle;
    }
};

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } = await VE_API.system.formDataList(params);
    if (code == "00") {
        const { pageSize, pageNum, total, list } = data;
        params.pageSize = pageSize;
        params.page = pageNum;
        params.total = total;
        if (imageList.value.length > 0) {
            list.forEach((item, index) => {
                for (let key in imageList.value) {
                    if (item[imageList.value[key].label] != null) {
                        list[index][imageList.value[key].label] = JSON.parse(
                            item[imageList.value[key].label]
                        );
                    }
                }
            });
        }
        tableData.value = list;
        getMoney();
    }
};
onMounted(async () => {
    await getDataTitle();
    await getDataList();
});
</script>

<style lang="scss" scoped>
.dialog-footer {
    margin-top: 40px;
}
.ve_table_content {
    height: 200px !important;
}
.ewmImage {
    width: 100%;
}
</style>
